13. Misc topics (1)
Today's topics
PostScript
WebGL
Social Action
GIS samples
Takram visualization
PostScript
"Page description language" by Adobe
Origin of PDF
Used in Apple LaserWriter
2D linear transformation + translation
Translation, rotation
No perspective transformation
Bezier curve
History of PostScript
Invented by John Warnock and Charles Geschke
At Xerox PARC
Adobe Inc. founded in December 1982
In 1985, Apple Computer licensed PostScript for use in its LaserWriter printers
LaserWriter
Laser printer from Apple (1986)
Black/whilte, 2 million yen
http://gyazo.com/2b78cf30bc6eba3a69a3486b0730e868.png
Use PostScript language
User affine transformation
Affine transformation
Rotation, zooming + transformation
Used in technical drawing
Affine transformation
http://gyazo.com/5ddd1b241cb69e927c19a787461bc270.png
c.f. Perspective transformation
Used in 3D CG
Perspective drawing
Perspective transformation
Far objects drawn small
http://gyazo.com/8d60d74cbf382a9bd6bee628e0c34875.png
Perspective transformation of circle?
Perspective transformation of circle
http://gyazo.com/4c5aa4823b10c5a9647f338eff95b334.png
PostScript Book
https://gyazo.com/b74d5a8513517ef29e87a1a6751dde93
NeXT Computer
Founded by Steve Jobs in 1985
NeXT Cube 1988
Origin of MacOS
Drawing with "Display PostScript"
Objective-C
http://gyazo.com/66d94e93c6a0d0153f171b88692e2445.png
History of Adobe
1985 PostScript
1989 PhotoShop
1994 Acquired Aldus
2005 Acquired Macromedia
Converted PostScript
Conversion by "distiller"
Can be generated without PostScript
Standard for documents
PostScript language
Programming language with drawing functions
Postfix nortation
c.f. Forth
Interpreter in printer
Can log in to printer
Reduced data between computer and printer
No input control
c.f. Display PostScript
Postfix notation
Formulas
Standard notation (e.g. 1 + 2)
Postfix notation (e.g. 1 2 +)
Used in HP calculators
No parenthesis required
Easily implemented with stack machine
Demo: dc command
10 20 + 30 * p ⇒ 900
Postfix notation
Conventional programming languages
for(i=0;i<10;i++){ printf("abc"); }
Postfix notation of Forth
1 10 { (abc) show } for
lines.ps
Drawing lines
code:lines.ps
%!PS-Adobe-3.0
0 0 moveto 0 400 lineto stroke
10 0 moveto 0 400 lineto stroke
20 0 moveto 0 400 lineto stroke
30 0 moveto 0 400 lineto stroke
%....
390 0 moveto 0 400 lineto stroke
400 0 moveto 0 400 lineto stroke
showpage
Result
http://gyazo.com/158a2c0d520dae1fa19fcc32d6a2933d.png
Using a loop
code:lines2.ps
%!PS-Adobe-3.0
0.5 setgray
0 10 400 {
0 moveto
0 400 lineto
stroke
} for
showpage
Result
http://gyazo.com/8aa4873f89a38e1b8d46282e0ba22fc8.png
Distiller
Convert PostScript to PDF
Loop result is expanded
http://gyazo.com/b37638d22c0df9d079f111f8c3280961.png
Demo: GhostScript
% gs -sDEVICE=x11
WebGL
Running OpenGL on browsers
OpenGL
3D drawing library GL developed by Silicon Graphics
OpenGL = library for wide range of computers
Linux, Mac, Windows
Example of GL
code:c
main()
{
prefposition(0,200,0,100);
winopen("GL Example");
RGBmode();
gconfig();
RGBcolor(0,0,100);
clear();
cmov2i(40,45);
RGBcolor(255,255,255);
charstr("Hello, World!");
sleep(10);
}
Example of OpenGL
code:c
void ohinit(void)
{
glClearColor(0.0,0.0,0.4,0.0);
glFrontFace(GL_CW);
glEnable(GL_CULL_FACE);
glCullFace(GL_BACK);
}
void ohreshape(int w,int h)
{
glViewport(0,0,(GLsizei)w,(GLsizei)h);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(-1.2,1.2,-1.2,1.2);
glMatrixMode(GL_MODELVIEW);
}
void ohdraw(void)
{
glBegin(GL_TRIANGLE_FAN);
glColor3f(0.0,0.0,1.0); glVertex3f(0.0,0.0,1.0);
glColor3f(1.0,0.0,0.0); glVertex3f(1.0,0.0,0.0);
glColor3f(0.0,1.0,0.0); glVertex3f(0.0,1.0,0.0);
glColor3f(0.0,1.0,1.0); glVertex3f(-1.0,0.0,0.0);
glColor3f(1.0,0.0,1.0); glVertex3f(0.0,-1.0,0.0);
glColor3f(1.0,0.0,0.0); glVertex3f(1.0,0.0,0.0);
glEnd();
glBegin(GL_TRIANGLE_FAN);
glColor3f(1.0,1.0,0.0); glVertex3f(0.0,0.0,-1.0);
glColor3f(1.0,0.0,0.0); glVertex3f(1.0,0.0,0.0);
glColor3f(1.0,0.0,1.0); glVertex3f(0.0,-1.0,0.0);
glColor3f(0.0,1.0,1.0); glVertex3f(-1.0,0.0,0.0);
glColor3f(0.0,1.0,0.0); glVertex3f(0.0,1.0,0.0);
glColor3f(1.0,0.0,0.0); glVertex3f(1.0,0.0,0.0);
glEnd();
}
GLUT
Library for using OpenGL on various platforms
Windows, Mac, Linux, etc.
Window / mouse manipulation
Example of GLUT
code:c
int main(int argc, char** argv)
{
glutInit(&argc,argv);
glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB);
glutInitWindowSize(300,300);
glutInitWindowPosition(100,100);
ohinit();
glutDisplayFunc(display);
glutReshapeFunc(reshape);
glutKeyboardFunc(keyboard);
glutIdleFunc(idle);
glutMainLoop();
return 0;
}
Example applications of GL/GLUT
LensBar
WING
LensBar
http://gyazo.com/77b8fad00d790d6e0fa4879d280ce176.png
DragZoom
http://masui.org/i/ https://gyazo.com/537951eb8ed43578783717eef497e391
WING
Information retrieval by 1D/2D/3D zooming
https://Gyazo.com/d44943c8f574a2da409443844eff601c.png
Video: WING
https://www.youtube.com/watch?v=8i1IqBXbV9g
https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/demos/webkit/SpinningBox.html http://gyazo.com/2b2d731b33eefbc423c30b28e0b8c3ee.png
Source
http://gyazo.com/4c2193c5acb673ffad2088117b779623.png
https://gyazo.com/109ffc512ac1529068921545095db984
WebGL samples
https://gyazo.com/4afc96a4a5fbd15fd610f97636dbd740.png
Three.js
GLSL
Programming the "shader" of WebGL
C-like language
Deck.gl
https://gyazo.com/0f512a8e4a84fdf784cfb93898ef5209
GIS visualization based on WebGL Future of WebGL
Runs on most modern PCs and tablets
Faster than canvas drawing
Should be used more for visualization
Visualization + network analysis
http://gyazo.com/027041ae81033b7de033394195b10f59.png
http://gyazo.com/e48af851cee63cdd5a7d46b01a9a0bb0.png
https://vimeo.com/7308004
/icons/hr.icon
GIS examples
Distance from Tokyo
https://www.youtube.com/watch?v=WvT8-LKQUJU
Human terrain
https://pudding.cool/2018/10/city_3d/ https://gyazo.com/f9a98f76d76f474587c3a7bfe1d936d6
流域マップ
https://s3-ap-northeast-1.amazonaws.com/naraemon-river/index.html#10/35.6810/139.7670 https://gyazo.com/94107130e77be8cce75e223476cf5080
River-only map
https://www.gridscapes.net/AllRivers/#9/35.3499/139.0512 https://gyazo.com/90cea877893e473e6e4559ff36a1cbd0
Mini Tokyo 3D trains
https://nagix.github.io/mini-tokyo-3d/#14/35.6814/139.767/0/60 https://gyazo.com/4a8aa27e355493200d0e76c80deef7de
http://gyazo.com/f403687b15d406b8c6535700ab1c01a8.png
Project at CMU
/icons/hr.icon
Generative Art
Generative art refers to art that in whole or in part has been created with the use of an autonomous system.
Use computers for generating art
Designing Math
Masahiko Furukata
https://www.amazon.co.jp/dp/4802512198 https://gyazo.com/10bdd4ff767e7b0dde89d8887e34ad1c
Generative art from mathematics
Generate beautiful graphics
https://www.amazon.co.jp/dp/4297104636 https://gyazo.com/ac5851168fed4bb142dc7af1caf620f7
Generative art using processing
https://www.amazon.co.jp/dp/4861009634 https://gyazo.com/0749a75e75bdc114c3c7f191d1c9ec6a
Generative Design
Generative Design: Visualize, Program, and Create with Processing
https://gyazo.com/aa642090e30179be11e5979aafc23ebb https://www.amazon.co.jp/dp/1616890770
Yamabe-san's work
https://gyazo.com/e10a8ab312f6ae80950b46869cc5ff08 https://masakiyamabe.com/
Wakita-san's work
https://gyazo.com/110ca296a7ad564b502656c541330a63 https://wakita.sfc.keio.ac.jp/inner/visualizationofairconditioner.html
/icons/hr.icon
a "Design engineering" company by Kin'ya Tagawa
https://www.youtube.com/watch?v=t_YvT3a_6JU
https://www.youtube.com/watch?v=NNVxQlSxcq4